<template>
  <div class="comment-board">
    <h1>留言板</h1>
    <div class="comment-controls">
      <p>《士兵突击》的热评</p>

      <div>
        <span class="active">热门</span>/ <span>最新</span>/ <span>好友</span>
      </div>
    </div>

    <div v-show="is">
      <ZuoVue @event="tian" :username="username" :content="content" />
      <p>{{ jia }}</p>
    </div>
    <button @click="is = true">添加短评</button>

    <ul class="comment-list">
      <li v-for="item in arr" :key="item.id" class="comment-item">
        <div class="user-info">
          <img :src="item.avatar" alt="头像" class="avatar" />
          <span>{{ item.username }}</span>
          <span class="time">{{ item.time }}</span>
        </div>
        <div>{{ item.content }}</div>
        <div class="actions">
          <button>👍 {{ item.likeCount }}</button>
          <button>回复</button>
        </div>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import ZuoVue from "@/components/ZuoVue.vue";

export default {
  components: { ZuoVue },
  name: "ZuoYe",
  data() {
    return {
      is: false,
      username: "",
      content: {},
      jia: "",
      arr: [
        {
          id: 1,
          username: "迷彩青春",
          avatar: "https://picsum.photos/id/1005/40/40",
          time: "2024-05-12 14:30",
          content:
            "这部剧教会我最重要的是：不抛弃，不放弃。许三多的成长历程太真实了，从一个孬兵变成兵王，背后是无数的坚持和汗水。",
          likeCount: 1258,
        },
        {
          id: 2,
          username: "钢七连老兵",
          avatar: "https://picsum.photos/id/1012/40/40",
          time: "2024-05-10 09:15",
          content:
            "每次看都有新感悟，尤其是史今班长退伍那段，每次看都忍不住落泪。他是许三多生命里的光，也是所有观众心里的意难平。",
          likeCount: 896,
        },
        {
          id: 3,
          username: "军事迷小李",
          avatar: "https://picsum.photos/id/1025/40/40",
          time: "2024-05-08 21:42",
          content:
            "这部剧没有女主角却比很多偶像剧更动人，男人之间的战友情、兄弟情刻画得太到位了。袁朗这个角色又酷又有深度！",
          likeCount: 632,
        },
        {
          id: 4,
          username: "平凡的世界",
          avatar: "https://picsum.photos/id/1074/40/40",
          time: "2024-05-05 16:08",
          content:
            "许三多说：'有意义就是好好活，好好活就是做有意义的事。' 这句话影响了我整个大学时代，迷茫的时候总会想起这句话。",
          likeCount: 954,
        },
        {
          id: 5,
          username: "突击精神",
          avatar: "https://picsum.photos/id/1066/40/40",
          time: "2024-05-01 10:33",
          content:
            "钢七连的那句'不抛弃，不放弃'已经成了我的人生信条。每次遇到困难，想到这部剧里的角色们，就又有了坚持下去的勇气。",
          likeCount: 1521,
        },
      ],
    };
  },
  computed: {},
  methods: {
    del(id) {
      this.arr = this.arr.filter((item) => item.id !== id);
    },
    tian(data) {
      this.jia = data;
    },
  },
};
</script>

<style lang='less' scoped>
.comment-board {
  width: 80%;
  margin: 0 auto;
  padding: 15px;
}

.comment-controls {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.active {
  color: #165dff;
  font-weight: bold;
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-item {
  padding: 12px 0;
  border-bottom: 1px dashed #eee;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.time {
  color: #999;
  font-size: 12px;
}

.actions {
  margin-top: 8px;
  display: flex;
  gap: 15px;
  button {
    border: none;
    background: none;
    cursor: pointer;
    color: #666;
  }
}
</style>